<template>
    <view :class="'shade ' + (isShow ? 'show' : '')">
        <view class="selector-area box box-tb">
            <view class="handle-bar box box-lr box-align-center">
                <text @tap="cancel" class="btn cancel flex">取消</text>
                <text @tap="confirm" class="btn confirm flex">确定</text>
            </view>
            <view class="area-selector box box-lr">
                <scroll-view class="selector province flex" data-type="province" :scrollY="true">
                    <view
                        @tap="tapProvince"
                        :class="'picker ' + (selectedProvince.index == index ? 'actived' : '')"
                        :data-code="item.code"
                        :data-full-name="item.fullName"
                        :data-index="index"
                        v-for="(item, index) in proviceData"
                        :key="index"
                    >
                        {{ item.fullNameDot }}
                    </view>
                </scroll-view>
                <scroll-view class="selector city flex" data-type="city" :scrollY="true">
                    <view
                        @tap="tapCity"
                        :class="'picker ' + (selectedCity.index == index ? 'actived' : '')"
                        :data-code="item.code"
                        :data-full-name="item.fullName"
                        :data-index="index"
                        v-for="(item, index) in cityData"
                        :key="index"
                    >
                        {{ item.fullNameDot }}
                    </view>
                </scroll-view>
                <scroll-view class="selector district flex" data-type="district" :scrollY="true">
                    <view
                        @tap="tapDistrict"
                        :class="'picker ' + (selectedDistrict.index == index ? 'actived' : '')"
                        :data-code="item.code"
                        :data-full-name="item.fullName"
                        :data-index="index"
                        v-for="(item, index) in districtData"
                        :key="index"
                    >
                        {{ item.fullNameDot }}
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
var e = require('../utils/util');
var t = 'http://japi.zto.cn/zto/api_utf8/baseArea?msg_type=GET_AREA&data=';
var a = {
    addDot: function (e) {
        if (e instanceof Array) {
            e.map(function (e) {
                return e.fullName.length > 4 ? {} : {};
            });
        }
    },
    load: function (d) {
        d.setData({
            isShow: false
        });
        (0, e.Promise)(uni.request, {
            url: t + '0',
            method: 'GET'
        })
            .then(function (l) {
                var c = l.data.result[0];
                a.addDot(l.data.result);
                d.setData({
                    proviceData: l.data.result,
                    'selectedProvince.index': 0,
                    'selectedProvince.code': c.code,
                    'selectedProvince.fullName': c.fullName
                });
                return (0, e.Promise)(uni.request, {
                    url: t + c.code,
                    method: 'GET'
                });
            })
            .then(function (l) {
                var c = l.data.result[0];
                a.addDot(l.data.result);
                d.setData({
                    cityData: l.data.result,
                    'selectedCity.index': 0,
                    'selectedCity.code': c.code,
                    'selectedCity.fullName': c.fullName
                });
                return (0, e.Promise)(uni.request, {
                    url: t + c.code,
                    method: 'GET'
                });
            })
            .then(function (e) {
                var t = e.data.result[0];
                a.addDot(e.data.result);
                d.setData({
                    districtData: e.data.result,
                    'selectedDistrict.index': 0,
                    'selectedDistrict.code': t.code,
                    'selectedDistrict.fullName': t.fullName
                });
            })
            .catch(function (e) {
                console.log(e);
            });
    },
    tapProvince: function (d, l) {
        var c = d.currentTarget.dataset;
        (0, e.Promise)(uni.request, {
            url: t + c.code,
            method: 'GET'
        })
            .then(function (d) {
                a.addDot(d.data.result);
                l.setData({
                    cityData: d.data.result,
                    'selectedProvince.code': c.code,
                    'selectedProvince.fullName': c.fullName,
                    'selectedCity.code': d.data.result[0].code,
                    'selectedCity.fullName': d.data.result[0].fullName
                });
                return (0, e.Promise)(uni.request, {
                    url: t + d.data.result[0].code,
                    method: 'GET'
                });
            })
            .then(function (e) {
                a.addDot(e.data.result);
                l.setData({
                    districtData: e.data.result,
                    'selectedProvince.index': d.currentTarget.dataset.index,
                    'selectedCity.index': 0,
                    'selectedDistrict.index': 0,
                    'selectedDistrict.code': e.data.result[0].code,
                    'selectedDistrict.fullName': e.data.result[0].fullName
                });
            })
            .catch(function (e) {
                console.log(e);
            });
    },
    tapCity: function (d, l) {
        var c = d.currentTarget.dataset;
        (0, e.Promise)(uni.request, {
            url: t + c.code,
            method: 'GET'
        })
            .then(function (e) {
                a.addDot(e.data.result);
                l.setData({
                    districtData: e.data.result,
                    'selectedCity.index': d.currentTarget.dataset.index,
                    'selectedCity.code': c.code,
                    'selectedCity.fullName': c.fullName,
                    'selectedDistrict.index': 0,
                    'selectedDistrict.code': e.data.result[0].code,
                    'selectedDistrict.fullName': e.data.result[0].fullName
                });
            })
            .catch(function (e) {
                console.log(e);
            });
    },
    tapDistrict: function (e, t) {
        var a = e.currentTarget.dataset;
        t.setData({
            'selectedDistrict.index': e.currentTarget.dataset.index,
            'selectedDistrict.code': a.code,
            'selectedDistrict.fullName': a.fullName
        });
    },
    confirm: function (e, t) {
        t.setData({
            address: t.data.selectedProvince.fullName + ' ' + t.data.selectedCity.fullName + ' ' + t.data.selectedDistrict.fullName,
            isShow: false
        });
    },
    cancel: function (e) {
        e.setData({
            isShow: false
        });
    },
    choosearea: function (e) {
        e.setData({
            isShow: true
        });
    }
};
module.exports = {
    SA: a
};
</script>
<style>
@import './selectarea.css';
</style>
